<template>
  <div class="water-cost">
    <table class="custom-table" border="1" cellpadding="8" cellspacing="0">
      <thead>
        <tr >
          <th>项目</th>
          <th>水表起始读数(m³)</th>
          <th>水表结束读数(m³)</th>
          <th>用水量(m³)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>清洁-冲水</td>
          <td>45798</td>
          <td>45999</td>
          <td>201</td>
        </tr>
        <tr>
          <td>超水</td>
          <td>45999</td>
          <td>46929</td>
          <td>930</td>
        </tr>
        <tr style="font-weight: bold;">
          <td>总计用水量</td>
          <td>--</td>
          <td>--</td>
          <td>1131</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { defineProps, defineExpose } from 'vue';
const props = defineProps(['repair']);

</script>

<style scoped>
.water-cost {
  padding: 16px;
  font-family: Arial, sans-serif;
}

h3 {
  margin-bottom: 16px;
  color: #333;
  text-align: center;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 14px;
  color: white;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 8px;
}

.custom-table tr:last-child td {
  font-weight: bold;
}
</style>